<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Electron 文件推流</title>
    <style>
        body { font-family: sans-serif; }
        #file-list { margin-bottom: 10px; }
        #log-output { height: 200px; border: 1px solid #ccc; overflow-y: scroll; white-space: pre-wrap; }
    </style>
</head>
<body>
    <h1>Electron 文件推流</h1>

    <div>
        <button id="select-files-btn">选择 MP4 文件</button>
        <div id="file-list"></div>
    </div>

    <div>
        <label for="rtmp-url">FTMP 推流地址:</label>
        <input type="text" id="rtmp-url" size="50" placeholder="例如: ftmp://your-server/live/streamkey">
    </div>

    <button id="start-stream-btn">开始推流</button>
    <button id="stop-stream-btn">停止推流</button>

    <div>
        <h2>推流状态:</h2>
        <div id="stream-status"></div>
    </div>

    <div>
        <h2>FFmpeg 日志:</h2>
        <div id="log-output"></div>
    </div>

    <script>
        const { ipcRenderer } = require('electron');
        const selectFilesBtn = document.getElementById('select-files-btn');
        const fileListDiv = document.getElementById('file-list');
        const rtmpUrlInput = document.getElementById('rtmp-url');
        const startStreamBtn = document.getElementById('start-stream-btn');
        const stopStreamBtn = document.getElementById('stop-stream-btn');
        const streamStatusDiv = document.getElementById('stream-status');
        const logOutputDiv = document.getElementById('log-output');

        let selectedFiles = [];

        selectFilesBtn.addEventListener('click', () => {
            ipcRenderer.send('select-files');
        });

        ipcRenderer.on('files-selected', (event, files) => {
            selectedFiles = files;
            fileListDiv.innerHTML = '已选择文件:<br>' + files.map(file => `- ${file}`).join('<br>');
        });

        startStreamBtn.addEventListener('click', () => {
            const rtmpUrl = rtmpUrlInput.value.trim();
            if (rtmpUrl) {
                ipcRenderer.send('start-stream', rtmpUrl);
            } else {
                streamStatusDiv.innerText = '请先输入 FTMP 推流地址。';
            }
        });

        stopStreamBtn.addEventListener('click', () => {
            ipcRenderer.send('stop-stream');
        });

        ipcRenderer.on('stream-status', (event, message) => {
            streamStatusDiv.innerText = message;
        });

        ipcRenderer.on('stream-log', (event, log) => {
            logOutputDiv.innerText += log;
            logOutputDiv.scrollTop = logOutputDiv.scrollHeight; // 自动滚动到底部
        });
    </script>
</body>
</html>